<template>
  <div>
    <TypeNavIndex></TypeNavIndex>
    <!-- 商品信息模块 开始 -->
    <div class="dt-goods w">
      <!-- 面包航导航 -->
      <div class="phone-nav">
        <ul>
          <li>
            <a href="javascript:;" v-show="categoryView.category1Name">{{ categoryView.category1Name }}</a>
          </li>
          <li>></li>
          <li>
            <a href="javascript:;" v-show="categoryView.category2Name">{{ categoryView.category2Name }}</a>
          </li>
          <li>></li>
          <li>
            <a href="javascript:;" v-show="categoryView.category3Name">{{ categoryView.category3Name }}</a>
          </li>

        </ul>
      </div>

      <!-- 产品介绍 -->
      <div class="intruduce">
        <!-- 左边详情介绍 -->
        <div class="left-preview fl">


          <!-- 放大镜区域 --> 
          <!-- 给放大镜区传递数据 -->
          <Zoom :skuImageList="skuInfo.skuImageList" />

          <!-- 缩略图 -->
          <ImageList :skuImageList="skuInfo.skuImageList" />

          <div class="goods-numb">
            <span>商品编号：0468256644</span>
            <!-- <div><img src="./img/分享.png" alt=""><a href="">分享</a></div>
            <div><img src="./img/关注.png" alt=""><a href="">关注 5000</a></div> -->
            <div><i class="box"></i><span>对比</span></div>
          </div>
        </div>
        <!-- 右边详情介绍 -->
        <div class="right-preview fl">
          <div class="title">
            <h3 style="margin: 10px 0; width: 720px;" v-show="skuInfo.skuName">{{ skuInfo.skuName }}</h3>
            <p class="style_red">{{ skuInfo.skuDesc }}</p>
          </div>
          <div class="price">
            <div class="price-icon">
              <div class="title fl">
                <i>价 格</i>
              </div>
              <div class="content fl">
                <span>￥{{ skuInfo.price }}.00</span>
                <em class="style_red">降价通知</em>
              </div>
              <div class="remark fr">累计评价612188</div>
            </div><br>
            <div class="price-icon">
              <div class="title fl">
                <i>促 销</i>
              </div>
              <div class="plus-pr fl">
                <span>加购价</span>
                满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，<br>
                即可在购物车换
                购热销商品 <a href="">详情</a> 》
              </div>
            </div>
          </div>
          <!-- 支持 start -->
          <div class="support">
            <div class="support-wrap">
              <div class="fl title"><i>支&nbsp;&nbsp;&nbsp;&nbsp; 持</i></div>
              <div class="fl fix-width"><em class="sup-bd">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em></div>
            </div>

            <div class="support-wrap">
              <div class="fl title"><i>配 送 至</i></div>
              <div class="fl">
                <em class="sup-bd">北京海淀区中关<i class="iconfont"></i>有货 支持 99元免运费 |货到付款
                  |211限时达
                </em>
              </div><br>
              <div class="fl express">
                <em class="sup-bd">由自营发货，并提供售后服务。11:00前完成下单，预计<strong>今天（08月10日）送达</strong></em>
              </div>
            </div>
          </div>
          <!-- 支持 end -->
          <!-- 选择模块 start -->
          <div class="choose">
            <ul class="color" v-for="(attr,index) in spuSaleAttrList" :key="index">
              {{attr.saleAttrName}}
              <li v-for="(attrList) in attr.spuSaleAttrValueList" :key="attrList.id" @click="changeAttr(attrList,attr.spuSaleAttrValueList)" :class="{choosed:(attrList.isChecked == 1)}">
                {{attrList.saleAttrValueName}}
              </li>
            </ul>
          </div>
          <!-- 数量控件 -->
          <div class="sup-wrap" id="sup-wrap">
            <div class="controls">
              <span class="text">{{ counter }}</span>
              <button  class="increment plus" @click="plustoshopcar">+</button>
              <button  class="increment mins" @click="minstoshopcar">-</button>
            </div>
            <!-- 这里路由跳转时，需要将购买的产品加入购入车，而这些产品的信息通过请求的形式通知服务器，服务器进行相应的存储 -->
            <a url="" class="addshopcar" @click="getAddCartNum">加入购物车</a>
              
          </div>
        </div>
        <!-- 选择模块 end -->
      </div>

      <!-- 产品详情 -->
      <div class="product-dt">
        <!-- 相关分类 -->
        <div class="mod_about fl">
          <div class="about-hd">
            <div class="ab-type"><a href="" class="style_red">相关分类</a></div>
            <div class="recom"><a href="">推荐品牌</a></div>
          </div>

          <div class="about-bd">
            <ul class="text-list">
              <li><a href="">手机</a><a href="">手机壳</a></li>
              <li><a href="">内存卡</a><a href="">iphone配件</a></li>
              <li><a href="">贴膜</a><a href="">手机耳机</a></li>
              <li><a href="">移动电源</a><a href="">平板电脑</a></li>
              <li><a href="">笔记本</a><a href="">蓝牙耳机</a></li>
            </ul>
            <ul class="pic-list">
              <h3>购买了此商品的用户还买了</h3>
              <li>
                <div class="list-img"><img src="./upload/详情页相关分类1.png" alt=""></div>
                <div class="add"><a href="">加入购物车</a></div>
              </li>
              <li>
                <div class="list-img"><img src="./upload/详情页分类2.png" alt=""></div>
                <div class="add"><a href="">加入购物车</a></div>
              </li>
              <li>
                <div class="list-img"><img src="./upload/详情页分类3.png" alt=""></div>
                <div class="add"><a href="">加入购物车</a></div>
              </li>
              <li>
                <div class="list-img"><img src="./upload/详情页分类2.png" alt=""></div>
                <div class="add"><a href="">加入购物车</a></div>
              </li>
              <li>
                <div class="list-img"><img src="./upload/详情页分类3.png" alt=""></div>
                <div class="add"><a href="">加入购物车</a></div>
              </li>
              <li>
                <div class="list-img"><img src="./upload/详情页相关分类1.png" alt=""></div>
                <div class="add"><a href="">加入购物车</a></div>
              </li>

            </ul>
          </div>

        </div>
        <!-- 产品参数 -->
        <div class="mod_info fr">
          <div class="collocation">
            <div class="info-hd">
              <div>选择搭配</div>
            </div>
            <div class="coll-bd">
              <div class="coll-list">
                <ul>
                  <li>精品</li>
                  <li>iphone配件</li>
                  <li>蓝牙耳机</li>
                  <li>自拍杆</li>
                  <li>数据线</li>
                  <li>其他手机配件</li>
                  <li>U盘</li>
                </ul>
              </div>
              <div class="coll-img">
                <ul>
                  <li><img src="./upload/coll3.png" alt=""><br>
                    <span class="price">￥5299.00</span>
                  </li>
                  <li>+</li>
                  <li><img src="./upload/coll3.png" alt=""><br>
                    <span class="price">￥39</span>
                  </li>
                  <li><img src="./upload/coll3.png" alt=""><br>
                    <span class="price">￥76</span>
                  </li>
                  <li><img src="./upload/coll3.png" alt=""><br>
                    <span class="price">￥76</span>
                  </li>
                  <li><img src="./upload/coll3.png" alt=""><br>
                    <span class="price">￥76</span>
                  </li>
                  <li class="selected">
                    <div>加入购物车</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="parameter">
            <div class="info-hd">
              <ul>
                <li>商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
              </ul>
            </div>
            <div class="para-bd">
              <ul>
                <li>分辨率：1920*1080(FHD)</li>
                <li>后置摄像头：1200万像素</li>
                <li>前置摄像头：500万像素</li>
                <li>核&nbsp;&nbsp;数：其他</li>
                <li>频&nbsp;&nbsp;率：以官网信息为准</li>
                <li>品牌： Apple</li>
                <li>商品名称：APPLEiPhone 6s Plus</li>
                <li>商品编号：1861098</li>
                <li>商品毛重：0.51kg</li>
                <li>商品产地：中国大陆</li>
                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                <li>系统：苹果（IOS）</li>
                <li>像素：1000-1600万</li>
                <li>机身内存：64GB</li>
              </ul>
            </div>
          </div>

          <div class="bigphone1">
          </div>
          <div class="bigphone2"></div>
        </div>
      </div>



    </div>
    <!-- 商品信息模块 结束 -->
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import Zoom from './Zoom'
import ImageList from './ImageList'

export default {
  name: "DetailIndex",
  components:{
    Zoom,
    ImageList
  },
  computed: {
    ...mapGetters({
      categoryView: "details/categoryView",
      skuInfo: "details/skuInfo",
      spuSaleAttrList: "details/spuSaleAttrList"
    }),
    ...mapState({
      price: function (state) {
        return state.details.detailsData.price;
      },
      valuesSkuJson: function (state) {
        return state.details.detailsData.valuesSkuJson;
      },
    })

  },
  mounted() {
    // 这里一定要记得使用了命名空间后，需要写路径details/
    this.$store.dispatch("details/getdetails", this.$route.params.skuId)
  },
  data() {
    return {
      counter: 1,
    }
  },
  methods: {
    changeAttr(attrList,attr){
    // 排它思想，先让所有的全部不选，再单独选一个
      attr.forEach(item=>{
        item.isChecked = '0';
      });
      // 选中点击的哪个售卖属性值
      attrList.isChecked = 1;
    },

    // 加入购物车数量控制
    plustoshopcar: function () {
      if (this.counter < 10) {
        this.counter += 1;
      } else {
        alert('数量不可以超过10');
      }
    },
    minstoshopcar: function () {
      if (this.counter > 1) {
        this.counter -= 1;
      } else {
        alert('数量不可以小于1');
      }
    },

    // 开始加入购物车
  async  getAddCartNum(){
      // 这里dispatach方法接收两个参数及两个以上的参数时用对象的方式接受
      try{
        // 经过此方法返回来的是promise
        await this.$store.dispatch('details/getAddOrUpdateShopCart',{
        skuId:this.$route.params.skuId,
        skuNum:this.counter})
        // 进行路由跳转
        // 这里跳转只是说明跳转路由加入购入车成功，不要要携带复杂的数据，可以用session存储就行
        // 回话存储，本地存储，存的都是字符串,而这里是对象需要转换下
        sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo));
        this.$router.push({name:'addcartsuccess',query:{skuNum:this.counter}});
      }catch(error){
        alert(error.message);
      }

    }

  },

}
</script>

<style lang="css" scoped>
.choosed{
  border: 2px solid #c81623;
}
.dt-goods {
  /* height: 500px; */
}

.dt-goods .phone-nav {
  height: 45px;
  /* text-align: center; */
  line-height: 45px;
}

.dt-goods .phone-nav ul li {
  display: inline-block;
  font-family: '宋体';
}

.dt-goods .phone-nav ul li:nth-child(even) {
  margin: 0 35px;
}

.intruduce {
  height: 620px;
}


.goods-numb>* {
  display: inline-block;
  margin-right: 40px;
}

.price {
  background-color: #fee9eb;
  width: 720px;
  height: 114px;
  margin-top: 20px;
  padding: 10px;
}

.price-icon {
  margin-bottom: 10px;
}

.price-icon .title {
  margin-top: 3px;
  letter-spacing: 10px;
}

.price-icon .content {
  margin-top: 3px;
}

.content span {
  font-size: 16px;
  font-weight: bold;
  color: #c81623;
  margin-left: 20px;
}

.price-icon .plus-pr span {
  background-color: #c81623;
  color: white;
}

.support-wrap {
  /* 可以让内容一行一行的显示 */
  overflow: hidden;
  line-height: 28px;
  margin-top: 10px;
}

.support-wrap .title {
  margin-right: 15px;
}

.express .sup-bd {
  margin-left: 58px;
}

.choose ul {
  margin-top: 10px;
}

.choose .color li {
  width: 84px;
  height: 43px;
  line-height: 43px;
}

.choose ul li {
  margin: 0 2px;
  display: inline-block;
  text-align: center;
  background-color: #f7f7f7;
}


.controls {
  position: relative;
  overflow: hidden;
  width: 70px;
  display: inline-block;
  margin-right: 20px;
  margin-top: 20px;
}

.controls .text {
  float: left;
  display: block;
  width: 45px;
  height: 45px;
  border: 1px solid #ddd;
  border-right: 0;
  color: #555;
  text-align: center;
  line-height: 42px;
}

.controls .plus {
  position: absolute;
  right: 10px;
  display: block;
  overflow: hidden;
  width: 17px;
  height: 23px;
  border: 1px solid #ccc;
  background: #f1f1f1;
  color: #666;
  text-align: center;
  line-height: 23px;
}

.controls .mins {
  position: absolute;
  top: 23px;
  right: 10px;
  display: block;
  overflow: hidden;
  width: 17px;
  height: 21px;
  border: 1px solid #ccc;
  background: #f1f1f1;
  color: #666;
  text-align: center;
  line-height: 21px;
}

.sup-wrap .addshopcar {
  background-color: #c81623;
  width: 142px;
  height: 47px;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  color: #fff;
  line-height: 47px;
  position: relative;
  top: -17px;
}

.product-dt {
  height: 2400px;
}

.product-dt .mod_about {
  width: 210px;
  height: 2300px;
  border: 1px solid #ededed;
  margin-top: 30px;
}

.product-dt .about-hd div {
  display: inline-block;
  width: 101px;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

.product-dt .about-hd .recom {
  background-color: #ccc;
}

.about-bd ul li a {
  display: inline-block;
  margin: 5px 0;
  width: 101px;
  height: 35px;
}


.mod_info {
  width: 980px;
  height: 2300px;
  border: 1px solid #ccc;
}

.collocation {
  height: 355px;
}

.mod_info .info-hd {
  height: 40px;
  background-color: #f1f1f1;
  border-bottom: 1px solid #dddddd;
}

.mod_info .info-hd div {
  height: 40px;
  width: 87px;
  background-color: #c81623;
  text-align: center;
  line-height: 40px;
  color: white;
}

.mod_info .coll-bd {
  padding: 16px;

}

.coll-bd .coll-list ul li {
  display: inline-block;
  margin-right: 44px;
}

.mod_info .coll-img li {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  margin-top: 20px;
}

.mod_info .coll-img li span {
  color: red;
  font-weight: bold;
  font-size: 16px;
}

.mod_info .coll-img .selected {
  background-color: #c81623;
  width: 142px;
  height: 47px;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  color: #fff;
  line-height: 47px;

}

.info-hd ul li {
  display: inline-block;
  margin-right: 20px;
  text-align: center;
  line-height: 40px;
}

.info-hd ul li:first-child {
  width: 80px;
  background-color: #c81623;
  color: white;
}

.bigphone1 {
  background: url(./upload/bigphone1.png) no-repeat;
  height: 777px;
}

.bigphone2 {
  background: url(./upload/bigphone2.jpg) no-repeat;
  height: 915px;
}
</style>